<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex d-flex md12>
        <v-layout row wrap>
          <v-flex d-flex md12>
            <v-layout row wrap>
              <v-flex d-flex>
                <v-flex md2 sm1>
                  <v-text-field :counter="6" mask="######" clearable name="lftid" label="用户ID" v-model="queryForm.lftid"></v-text-field>
                </v-flex>
                <v-flex md2 sm1>
                  <v-text-field clearable name="nickname" label="用户名称" v-model="queryForm.nickname"></v-text-field>
                </v-flex>
                <v-flex md2 sm1>
                  <v-btn @click="search" dark color="blue" class="mt-2">
                    <v-icon>search</v-icon>
                    <span class="pl-2 subheading">搜索</span>
                  </v-btn>
                </v-flex>
                <v-spacer></v-spacer>
                <v-flex md1 class="mr-3">
                <v-btn round @click="addUser" dark color="cyan">
                  <v-icon>add</v-icon>
                  <span class="pl-2 subheading">新增用户</span>
                </v-btn>
              </v-flex>
              </v-flex>
            </v-layout>
          </v-flex>
          <v-flex d-flex md12>
            <v-layout row wrap>
              
              <v-flex d-flex md12>
                <v-layout row wrap>
                  <v-flex row>
                    <!-- 查询数据表格 -->
                    <v-data-table :loading="false" :headers="headers" :items="tableData" hide-actions class="elevation-1">
                      <v-progress-linear slot="progress"  color="teal" height="5"  v-if="showProgress" indeterminate></v-progress-linear>
                      <template slot="items" slot-scope="props">
                        <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
                        <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
                        <td class="text-xs-center subheading">{{ props.item.role }}</td>
                        <td class="text-xs-center subheading">{{ props.item.account }}</td>
                        <td class="text-xs-center">
                          <v-btn flat round dark color="indigo" class="mx-1" @click="editItem(props.item)">
                            <span class="mx-1">编辑用户</span>
                            <v-icon color="indigo">edit</v-icon>
                          </v-btn>
                          <v-btn flat round dark color="green" class="mx-1" @click="resetPswd(props.item)">
                            <span class="mx-1">重置密码</span>
                            <v-icon color="green">settings_backup_restore</v-icon>
                          </v-btn>
                          <v-btn flat round dark color="red" class="mx-1" @click="deleteUser(props.item)">
                            <span class="mx-1">删除用户</span>
                            <v-icon color="red">delete</v-icon>
                          </v-btn>
                        </td>
                      </template>
                      <!-- 没有数据时显示的提示 -->
                      <template slot="no-data">
                        <div class="text-md-center">
                          <v-icon color="yellow darken-3">warning</v-icon>
                          <span class="subheading">暂无数据</span> 
                        </div>
                      </template>
                    </v-data-table>
                    <!-- 表格显示分页 -->
                    <v-layout>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap justify-center>
              <v-flex md10>
                <v-text-field clearable prepend-icon="face" label="名字" v-model="editedItem.nickname"></v-text-field>
              </v-flex>
              <v-flex md10>
                <v-text-field clearable prepend-icon="account_circle" label="帐号" v-model="editedItem.account"></v-text-field>
              </v-flex>
              <v-flex md10>
                <!-- <v-text-field prepend-icon="lock_outline" label="角色" v-model="editedItem.lftid"></v-text-field> -->
                <v-select :items="roleItems" label="角色" target="#dropdown-example"></v-select>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="close">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="save">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="modal = false">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import * as auth from '../../api/auth'
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    modal: false,
    pagination: {},
    formTitle: "新增用户",
    modalText: '',
    queryTypes: [
      {
        value: 1,
        title: "ID"
      },
      {
        value: 2,
        title: "名称"
      }
    ],
    queryForm: {},
    tableData: [],
    headers: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "名称", value: "nickname", align: "center", sortable: false },
      { text: "角色", value: "telephone", align: "center", sortable: false },
      { text: "帐号", value: "saleLevel", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false },
    ],
    editedIndex: -1,
    editedItem: {
      name: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,
      telephone: 0,
      superId: 0,
      saleLevel: 1,
      createTime: '2018-4-19'
    },
    defaultItem: {
      saleLevel: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,
      telephone: 0,
      superId: 0,
      saleLevel: 1,
      createTime: '2018-4-19'
    },
    roleItems: [
        { text: '管理员', callback: () => console.log('list') },
        { text: '普通用户', callback: () => console.log('favorite') },
      ],
  }),
  mounted() {
    this.initialize();
  },
  methods: {
    initialize() {
      this.tableData = [
        {
          lftid: 100000,
          nickname: 'shuaishuai',
          telephone: '无',
          account: 'shuaishuai',
          saleLevel: 1,
          role: '超级管理员',
          createTime: '2018-4-19',
        }
      ];
    },
    close() {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.tableData[this.editedIndex], this.editedItem);
      } else {
        this.tableData.push(this.editedItem);
      }
      this.close();
    },
    search() {
      $Vue.$emit('toggleSnackbar', {
        text: 'lalalala'
      })
    },
    editItem(item) {
      this.editedIndex = this.tableData.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.formTitle = '编辑用户'
      this.dialog = true;
    },
    resetPswd() {
      this.modal = true
      this.modalText = '确认重置该用户的密码吗?'
    },
    deleteUser() {
      this.modal = true
      this.modalText = '确认删除该用户吗?'
    },
    addUser() {
      this.formTitle = '新增用户'
      
      this.dialog = true
    }
  }
};
</script>

<style lang="less" scoped>

</style>

